<template>
	<div>
		<m-table name="admin-goods" :showSelected="true" :action="action" :search="search" :params="params" ref="table">

			{{ params }}

			

			<el-table-column label="商品名" prop="name" width="180" />

			<el-table-column label="商品图" prop="name" width="120">
				<template slot-scope="scope">
					<el-avatar :src="scope.row.images[0]" fit="contain"></el-avatar>
				</template>
			</el-table-column>

			<el-table-column label="剩余库存" prop="stock" width="120">
				<template slot-scope="scope">
					<el-button type="success" size="mini" @click="openSetStock(scope.row)">{{ scope.row.stock }}</el-button>
				</template>
			</el-table-column>

			<el-table-column label="商品价格" prop="price" width="120" />

			<el-table-column label="商品编码" prop="goodsCode" width="120" />

			<el-table-column label="规格" prop="skuInfo" width="180" />

			<el-table-column label="单位" prop="unit" width="140" />

			<el-table-column label="所属分类" prop="goodsTypeName" width="180" />

			<el-table-column label="添加时间" prop="created" width="180" />
		</m-table>

		<el-dialog title="设置库存" :visible.sync="setStock.show" width="30%">
			<el-form>
				<el-form-item label="库存">
					<el-input v-model="setStock.data.stock"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="setStock.show = false">取 消</el-button>
				<el-button type="success" @click="subStock">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="设置分级价格" :visible.sync="setPrices.show" width="30%">
			<el-form>
				<el-form-item :label="item.name + '价格'" v-for="item in setPrices.data.data" :key="item.id">
                    <el-input v-model.number="item.price" placeholder="请输入价格"></el-input>
                </el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="success" @click="submitPrice">修改价格</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import request from '@/utils/request';
import { accountState } from '@/config/account';
export default {
	data() {
		return {
			states: accountState,
			setStock: {
				show: false,
				data: { id: '', stock: '' },
			},
			setPrices: {
				show: false,
				data: { id: '', data: '' },
			},
			search: [
				{ icon: 'el-icon-mobile', type: 'like', name: 'a.name', label: '商品名', span: 4, value: '' },
				{ icon: 'el-icon-mobile', type: 'select', name: 'a.goodsTypeId', label: '所属分类', span: 4, value: '', data: [] },
			],
			action: { remove: true, edit: true, add: true, export: false },
			params: [
				{ name: 'id', value: '', hide: true },
				{ name: 'name', value: '', label: '商品名称', type: 'string' },
				{ name: 'images', value: '', label: '商品主图', type: 'image', count: 5 },
				{ name: 'price', value: '', label: '商品价格', type: 'string' },
				{ name: 'skuInfo', value: '', label: '规格', type: 'string' },
				{ name: 'unit', value: '', label: '单位', type: 'string' },
				{ name: 'goodsCode', value: '', label: '商品编码', type: 'string' },
				{ name: 'description', value: '', label: '商品详情', type: 'fulltext' },
				{ name: 'goodsTypeId', value: '', label: '商品分类', type: 'apiSelect', url: 'admin-goodstype/name' },
			],
		};
	},
	mounted() {
		this.loadTypes();
	},
	methods: {
		async loadTypes() {
			let res = await request.get('admin-goodstype/name');
			this.search[1].data = res;
		},
		openSetStock(row) {
			this.setStock.show = true;
			this.setStock.data.id = row.id;
			this.setStock.data.stock = row.stock;
		},
		openSetPrices(row) {
			this.setPrices.show = true;
			this.setPrices.data.id = row.id;
			this.loadPrice(row.id);
		},
		async loadPrice(id) {
			this.setPrices.data.data = await request.get(`admin-goods/level/${id}`);
		},
        async submitPrice(){
            await request.post('admin-goods/set-prices', this.setPrices.data);
            this.setPrices.show = false;
            this.setPrices.data.data = {}
            this.setPrices.data.id = '';
        },
        async subStock(){
            await request.post('admin-goods/set-stock', this.setStock.data);
            this.setStock.show = false; 
            this.setStock.data.id = '';
            this.setStock.data.stock = '';
            this.$refs.table.reload()
        }
	},
};
</script>